<#import "/macro.ftl" as m>
<@m.page_header title='常见问题' />
<div id="page-content-wrapper">
    <div id="page-title">
        <h3>常见问题</h3>
        <div id="breadcrumb-right">
            <div class="float-right">
                <a href="javascript:;" class="btn medium primary-bg" onclick="showAdd();">
                    <span class="button-content">常见问题</span>
                </a>
            </div>
        </div>
    </div>
    <div id="page-content">
    	<form id="form" action="/question" method="get">
    		<div class="form-row">
    			<div class="form-input col-md-6">
    				<input placeholder="填写问题查询" type="text" name="ask" id="ask" value="${ask}">
    			</div>
    			<div class="form-input col-md-2">
		        	<a href="javascript:;" class="btn large primary-bg radius-all-4" id="search" title="Validate!" onclick="$('#form').trigger('submit');">
			            <span class="button-content">查询</span>
	                </a>
		        </div>
    		</div>
    	</form>
    	<table id="question" class="table">
	        <thead>
	            <tr>
	                <th>问题</th>
	                <th>解答</th>
	                <th width="150px">操作</th>
	            </tr>
	        </thead>
	        <tbody>
	        	<tr id="question-row-template" class="hide">
	                <td id="ask"></td>
	                <td id="answer"></td>
	                <td>
	                    <a id="edit" href="javascript:;" class="btn medium primary-bg">
	                    	<span class="button-content">编辑</span>
	                    </a>
	                    <a id="delete" href="javascript:;" class="btn medium primary-bg"">
	                    	<span class="button-content">删除</span>
	                    </a>
	                </td>
	            </tr>
	        	<#list questions.list as question>
					<tr id="${question.id}">
						<td>${question.ask}</td>
		                <td><pre>${question.answer}</pre></td>
		                <td>
		                    <a href="/question/edit/${question.id}" class="btn medium primary-bg">
		                    	<span class="button-content">编辑</span>
		                    </a>
		                    <a href="javascript:;" class="btn medium primary-bg" onclick="showDelete(${question.id});">
		                    	<span class="button-content">删除</span>
		                    </a>
		                </td>
		            </tr>
				</#list>    
	    	</tbody>
	    </table>
	    <div class="button-group center-div">
	    	${pagerHelper.content}
	    </div>
    </div>
</div>
<div id="add-question-template" class="hide">
	<form>
		<div class="form-row">
			<div class="form-label col-md-2">
                <label for="title">标题:</label>
            </div>
            <div class="form-input col-md-10">
                <input name="ask" data-required="true" type="text">
            </div>
		</div>
		<div class="form-row">
			<div class="form-input col-md-12">
                <textarea rows="12" name="answer" data-required="true"></textarea>
            </div>
		</div>
	</form>
</div>

<script type="text/javascript">

/*
var uySaveFloder ="question/"+new Date().getFullYear()+""+new Date().getMonth()+""+new Date().getDate();
$(function () {
	var ue = UE.getEditor('editor-answer', {upYunSaveFolder: uySaveFloder});
    ue.options.allowDivTransToP = false;
});
*/

function showAdd(){
	var html = '<div id="dialog" class="hide" title="添加问题"><div class="mrg10A">' + $("#add-question-template").html() + '</div></div>';
	$( html ).dialog({
        resizable:!0,
        minWidth:600,
        minHeight:350,
        modal:!0,
        dialogClass:"modal-dialog",
        closeOnEscape:!0,
        close : function() {
			$( this ).dialog( "destroy" );
		},
        buttons: {
            保存: function() {
            	var valid = $('#dialog form').parsley( 'validate' );
            	if(!valid){
            		return;
            	}
            	
            	//$("#dialog #answer").val(UE.getEditor('editor-answer').getContent());
            	
            	$.post( '/question', $( '#dialog form' ).serialize() )
                 .done(function(data){
                 	if(data["status"] == "success"){
                 		$.jGrowl("添加问题成功", {sticky:!1,position:"top-right",theme:"bg-green"});
                 		$( "#dialog" ).dialog( "close" );
                 		location.reload();
                 	}else{
                 		$.jGrowl(data["message"], {sticky:!1,position:"top-right",theme:"bg-red"});
                 	}
                 })
                 .fail(function(){
                 	$.jGrowl("添加问题失败", {sticky:!1,position:"top-right",theme:"bg-red"});
                 	$( "#dialog" ).dialog( "close" );
                 });
            }
		}
	});
};

function showDelete( id ){
	$.messager.confirm( "提示", "确定删除吗？", function(){
		$.ajax({
		    url: '/question/' + id,
		    type: 'POST',
		    data: { _method: 'DELETE' }
		})
	    .done(function(data){
	     	if(data["status"] == "success"){
	     		$.jGrowl("删除问题成功", {sticky:!1,position:"top-right",theme:"bg-green"});
	     		$('.table').find('tr[id=' + id + ']').remove();
	     	}else{
	     		$.jGrowl(data["message"], {sticky:!1,position:"top-right",theme:"bg-red"});
	     	}
	     })
	     .fail(function(){
	     	$.jGrowl("删除问题失败", {sticky:!1,position:"top-right",theme:"bg-red"});
	     });
	});
};

</script>